<template>
	<view id="sns">
		<!-- 页面 header 相关部分 -->
		<view class="header-box">
			<!-- 顶部广告位轮播图 -->
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2500" :duration="500">
				<swiper-item v-for="item in swiperAdList" :key="item.id">
					<navigator open-type="navigate" :url=" '/pages/webview/webview?url='+encodeURI(item.link)">
						<image class="banner-swiper-img" :src="item.image" mode="aspectFill" />
					</navigator>
				</swiper-item>
			</swiper>

			<!-- 遮罩使用弧形框 -->
			<image class="crile" src="@/static/crile.png" mode="aspectFill" />

			<!-- 两个选项按钮 -->
			<view class="card-header">
				<view class="card-one card-left" @tap="gotoNav('/pages/feeds/feeds')">
					<image class="img" src="@/static/coffee.png" mode="aspectFill" />
					<view class="iright">
						<view class="title">精彩动态</view>
					</view>
				</view>
				<view class="card-one card-right" @tap="gotoNav('/pages/news/news')">
					<image class="img" src="@/static/ran.png" mode="aspectFill" />
					<view class="iright">
						<view class="title">新闻中心</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 动态列表 -->
		<view class="feeds-box">
			<view class="feed-one" v-for="(item, index) in feedsList" :key="index">
				<navigator open-type="navigate" :url="'/subpages/feedinfo/feedinfo?id='+item.id">
					<image class="feed-img" :src="item.cover" mode="widthFix" :lazy-load="true" />
					<view class="u-line-2 feed-title" v-if="!!item.feed_content">{{ item.feed_content }}</view>
					<view class="feed-info">
						<view class="iview">
							<image class="avatar" :src=" item.avatar" />
							<text class="name u-line-1">{{ item.name }}</text>
						</view>
						<view class="iview">
							<view class="ilike" @tap.stop="clickLove(item)">
								<image v-if="item.has_like" src="@/static/lover.png" class="micon" />
								<image v-else src="@/static/love.png" class="micon" />
								<text class="love-count" v-if="item.like_count>0">{{ item.like_count }}</text>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<login ref="login"></login>
		<gotoShare></gotoShare>
	</view>
</template>
<script>
	import {
		getAdvert,
		getFeeds
	} from "../../common/api.js"
	
	// 切记使用 mixins 里调用的数据，都是需要在调用的地方保证存在的
	import {
			mapState
	} from 'vuex'
	
	import login from "@/components/login/login.vue"
	import gotoShare from "@/components/gotoShare/gotoShare.vue"
	import feedMixin from '@/mixins/todoFeeds.js'
	
	export default {
		mixins: [feedMixin],
		data() {
			return {
				// 广告轮播图相关信息
				swiperAdList: [],
				// 动态列表
				feedsList: []
			}
		},
		computed: {
			...mapState(['loginState'])
		},
		components: {
			login,
			gotoShare
		},
		async onLoad() {
			// 发出请求，请求轮播图数据
			let res = await getAdvert({
				space: "1,2,3"
			})
			this.swiperAdList = res.map(item => {
				return {
					id: item.id,
					link: item.data.link,
					image: item.data.image
				}
			})
			this.getFeedsList()
			uni.$on('indexUserLogin', () => {
				this.feedsList = []
				this.getFeedsList()
			})
		},
		methods: {
			// 获取动态请求数据
			async getFeedsList() {
				// 请求 动态信息
				let feeds = await getFeeds()
				console.log(feeds);
				const newfeeds = feeds.feeds.map(item => {
					return {
						...item,
						cover: this.BaseFileURL + item.images[0].file,
						avatar: !!item.user.avatar ? item.user.avatar.url : '/static/nopic.png',
						name: item.user.name,
					}
				})
				this.feedsList = [...this.feedsList, ...newfeeds]
				uni.stopPullDownRefresh()
			},
			// 点击跳转路由
			gotoNav(url) {
				uni.switchTab({
					url
				})
			}
		},
		onReachBottom() {
			this.getFeedsList()
		},
		onPullDownRefresh() {
			this.feedsList = []
			this.getFeedsList()
		}
	}
</script>

<style lang="scss" scoped>
	#sns {
		background-color: #f1f1f1;
	}

	// 推荐、咨询 按钮样式
	.tabs-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 750upx;

		.one-nav {
			width: 120upx;
			color: #9B9B9B;
			font-size: 36upx;
			text-align: center;
			font-weight: blod;

			&.nav-actived {
				color: #0050FF;
			}
		}
	}

	.header-box {
		position: relative;
		left: 0;
		height: 500upx;
		background-color: #f1f1f1;
		z-index: 1;

		// 广告位轮播器相关样式
		.swiper {
			width: 750upx;
			height: 400upx;
			position: absolute;
			left: 0;
			top: 0;
			text-align: center;
			z-index: 1;

			.banner-swiper-img {
				width: 750upx;
				height: 400upx;
				box-shadow: 0 0 2px 0 rgb(188, 188, 188);
			}
		}

		.crile {
			width: 750upx;
			height: 50upx;
			position: absolute;
			left: 0;
			top: 355upx;
			z-index: 9;
		}

		// 新鲜事 活动墙 按钮样式
		.card-header {
			position: absolute;
			left: 0;
			top: 320upx;
			height: 160upx;
			z-index: 99;
			width: 710upx;
			margin-left: 20upx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			align-content: center;

			.card-one {
				width: 328upx;
				height: 96upx;
				border-radius: 49upx;
				background-color: #fff;
				margin: 0 10upx;
				box-shadow: 0 0 2px 0 rgb(188, 188, 188);
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;

				.img {
					width: 44upx;
					height: 44upx;
					margin-left: 50upx;
				}

				.iright {
					margin-left: 30upx;
					text-align: left;
					color: #888;

					.title {
						font-size: 30upx;
						color: #001432;
					}

					.iview {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;
						font-size: 20upx;
						margin-top: -5upx;
					}
				}
			}
		}

		// 推荐、咨询 按钮样式
		.tabs-box {
			width: 750upx;
			position: absolute;
			z-index: 1;
			left: 0;
			top: 480upx;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.one-nav {
				height: 80upx;
				width: 110upx;
				color: #9B9B9B;
				font-size: 36upx;
				text-align: center;
				font-weight: blod;

				&.nav-actived {
					color: #0050FF;
				}
			}
		}
	}

	.feeds-box {
		width: 730upx;
		padding-top: 20upx;
		padding-bottom: 20upx;
		/* 瀑布流容器内元素的间隔 */
		column-gap: 5px;
		/* 瀑布容器内排列的列数 */
		column-count: 2;

		.feed-one {
			width: 340upx;
			background-color: #FFF;
			border-radius: 20upx;
			margin: 10px;
			/* avoid避免在主体框中插入任何中断（页面，列或区域） */
			break-inside: avoid;
			position: relative;

			.feed-img {
				width: 340upx;
				height: 300upx;
				border-radius: 10upx;
			}

			.feed-title {
				width: 350upx;
				margin-top: 15upx;
				margin-left: 10upx;
				font-size: 28upx;
				line-height: 40upx;
				color: #001432;
				text-align: left;
			}

			.feed-info {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				align-content: center;
				margin-top: 10upx;
				font-size: 20upx;
				color: #666;
				padding: 0 10upx 16upx;

				.iview {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					align-content: center;

					.ilike {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;
						height: 60upx;
						padding: 0 10upx;
						background-color: #FFFFFF;
					}
				}

				.avatar {
					margin-right: 10upx;
					height: 40upx;
					width: 40upx;
					border-radius: 50%;
					border: 1upx solid #eee;
				}

				.name {
					max-width: 120upx;
					color: #757474;
				}

				.micon {
					width: 32upx;
					height: 28upx;
				}

				.love-count {
					padding-left: 10upx;
					color: #757474;
				}
			}
		}
	}
</style>
